<template>
	<view class="login">
		<!--顶部返回按钮-->
		<view class="login-top bg-active">
			<view class="desc">
				<!-- <view class="title">Hi~</view> -->
				<text>{{ appName }}</text>
			</view>
			<image class="login-pic" src="/static/login-pic.png"></image>
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/login-bg.png" style="height:94vw"></image>
			<view class="main">
				<view class="nav-bar">
					<view class="nav-bar-item text-active">
						登录
					</view>
				</view>
				<block>
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont iconzhanghuffffffpx"></text>
							<input class="login-type-input" type="number" name="mobile" v-model="loginParams.loginPhone" placeholder="请输入手机号码"
							 maxlength="11" />
						</view>
						<view class="input-item input-item-sms-code">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input type="number" class="login-type-input" v-model="loginParams.code" placeholder="请输入验证码" maxlength="4" />
								</view>
								<button class="sms-code-btn" @tap.stop="getSmsCode('login')">
									<text v-if="!smsCodeBtnDisabled">获取验证码</text>
									<text v-else class="sms-code-resend">{{`重新发送 (${codeSeconds})`}}</text>
								</button>
							</view>
						</view>
					</view>
					<button class="confirm-btn bg-active" @tap="toLogin">
						登录
					</button>
				</block>
			</view>
		</view>
		<view class="login-type-bottom text-active">
			{{ appName }} 版权所有
		</view>
	</view>
</template>
<script>
	import api from '@/comon/api.js'
	export default {
		data() {
			return {
				//登录所需信息
				loginParams: {
					loginPhone: "",
					code: '',
					invitecode: "6006ac9e01f4470001049d74",
					user_type: 0
				},
				appName: 'uniCloud商城',
				smsCodeBtnDisabled: false
			};
		},
		onLoad(options) {
			if (options.invitecode) {
				this.loginParams.invitecode = options.invitecode;
			}
		},
		methods: {
			// 点击登录
			async toLogin() {
				uni.showLoading({})
				let that = this;
				let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.loginParams.loginPhone)) {
					this.showToast('手机号格式有误');
					return
				}
				if (this.loginParams.code.length != 4) {
					this.showToast('验证码格式错误')
					return
				}
				this.loginParams.user_type = 1;
				let res = await api.uniCloudApi(api.publicFun.user, this.loginParams);
				if (res.length == 1) {
					uni.setStorage({
						key: 'userInfos',
						data: res[0],
						success() {
							that.showToast('登录成功');
							setTimeout(() => {
								uni.switchTab({
									url: '../index/index'
								})
							}, 600)
						}
					})
				} else {
					this.showToast(res.msg)
				}
				uni.hideLoading()
			},
			// 发送验证码
			async getSmsCode(usage) {
				this.loginParams.user_type = 0;
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phoneReg.test(this.loginParams.loginPhone)) {
					this.showToast('手机号格式有误');
					return false
				}
				let res = await api.uniCloudApi(api.publicFun.user, this.loginParams);
				if (res.success == true) {
					this.showToast('验证码发送成功,请注意查收');
					this.smsCodeBtnDisabled = true;
					this.codeSeconds = 120;
					var auth_timetimer = setInterval(() => {
						this.codeSeconds--;
						if (this.codeSeconds < 0) {
							this.smsCodeBtnDisabled = false;
							clearInterval(auth_timetimer);
						}
					}, 1000);
				} else {
					this.showToast(res.msg)
				}
			},
			showToast(msg) {
				uni.hideLoading()
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.login {
		width: 100%;
		position: relative;

		.bg-active {
			background-color: #e61d27;
			color: #fff;
		}

		.text-active,
		.iconfont {
			color: #e61d27;
		}

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 48rpx;
			color: #fff;
		}

		.login-top {
			height: 410rpx;
			position: relative;

			.desc {
				color: #fff;
				position: absolute;
				top: 150rpx;
				left: 40rpx;
				font-size: 48rpx;

				.title {
					font-size: 48rpx;
				}
			}

			.login-pic {
				position: absolute;
				width: 220rpx;
				height: 270rpx;
				right: 30rpx;
				top: 50rpx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72rpx;

			.login-bg {
				width: 94vw;
				height: 94vw;
				margin: 0 3vw;
			}

			.main {
				width: 94vw;
				position: absolute;
				top: 0;
				left: 3vw;

				.nav-bar {
					display: flex;
					height: 100rpx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;

					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96rpx;
						font-size: 32rpx;
						display: flex;
						margin: 0 120rpx;
						justify-content: center;
					}

					.nav-bar-item-active {
						border-bottom: 5rpx solid;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50rpx auto;

					.input-item {
						position: relative;
						height: 90rpx;
						line-height: 90rpx;
						margin-bottom: 30rpx;

						.iconfont {
							font-size: 50rpx;
							position: absolute;
							left: 0;
						}

						.login-type-input {
							height: 90rpx;
							padding-left: 80rpx;
							border-bottom: 1rpx solid rgba(0, 0, 0, .1);
						}

						.sms-code-btn,
						sms-code-resend {
							width: 240rpx;
							font-size: 26rpx;
						}
					}
				}

				.login-type-tips {
					padding: 30rpx 50rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28upx;
					color: #666;
				}

				.login-radio-tips {
					padding: 0 50rpx;
					line-height: 22rpx;
					height: 22px;
					font-size: 24rpx;
					display: flex;
					text-align: center;
					justify-content: center;
					align-items: center;

					navigator {
						color: #0000FF;
					}
				}

				.confirm-btn {
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
					/* #ifdef MP-ALIPAY */
					margin: 0 70rpx;
					/* #endif */
				}
			}
		}

		.login-type-bottom {
			width: 100%;
			padding-bottom: 30rpx;
			text-align: center;
			font-size: 32rpx;
		}

		// 发送验证码样式
		.input-item-sms-code {
			.input-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.sms-code-btn {
				width: 200upx;
				background-color: #fff;
				display: flex;
				padding: 15upx 0;
				justify-content: center;
				align-items: center;
				border-radius: 12upx;
				/* #ifdef MP-ALIPAY */
				height: 70rpx;
				/* #endif */
			}

			.sms-code-resend {
				color: #666;
			}
		}
	}
</style>
